<template>
	<!-- 我的/登录部分 -->
	<view v-if="showAuth" class="userAuth">
		<view class="page-login">
			<button class="btn-auth" type="default" @click="clickBtn">获取用户信息</button>
			<view v-if="showPhoneMask" class="mask">
				<view class="cont">
					<view class="tit">
						提示
					</view>
					<view class="content">
						为了向您提供更好的服务<br> 我们需要获取您的手机号
					</view>
					<u-button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" class="btn" type="primary">
						获取手机号 </u-button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import WXBizDataCrypt from "../commonJS/WXBizDataCrypt.js";
	import api from '../api/routes.js'
	export default {
		data() {
			return {
				showAuth: false,
				showPhoneMask: false,
				infors: {},
				canIUse: uni.canIUse('button.open-type.getUserInfo'),
				canIGetUserProfile: true, //微信登录新旧版本 true是新
			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			showMask(){
				this.showAuth = true;
			},

			login(res) {
				this.$myRequest({
					url:api.miniLogin,
					method: "POST",
					data: {
						nickname: this.infors.nickName,
						avatar: this.infors.avatarUrl,
						openid: res.openid,
						unionid: res.unionid,
						phoneNumber: res.phoneNumber,
						sex: this.infors.gender,
						fromMbId: ""
					},
				}).then(res => {
					console.log(res)
					if (res.data.code == 0) {
						this.showPhoneMask = false;
						this.showAuth = false;
						console.log(res.data)
						uni.setStorageSync('member', res.data.member);
						uni.setStorageSync('token', res.data.token);
					}
				})
			},
			onGetPhoneNumber(PhoneNumber) {
				uni.login({
					provider: 'weixin',
					success: res => {
						this.$myRequest({
							url:api.jscode2session,
							method: "GET",
							data: {
								code: res.code,
							},
						}).then(res1 => {
							let {http://emsendparcelexclusive.vfengyun.cn/index/spec/ticket
								session_key,
								unionid,
								appid,
								openid,
								phoneNumber
							} = res1.data.jsonObject;

							console.log(session_key,
								unionid,
								appid,
								openid,
								phoneNumber)

							if (!phoneNumber) {
								let pc = new WXBizDataCrypt(appid, session_key);
								let data = pc.decryptData(PhoneNumber.detail.encryptedData,
									PhoneNumber.detail.iv);
								this.login(res1.data.jsonObject)
							} else {
								this.login()
							}


						})
					},
					fail: res => {

						// 拒绝授权
						wx.showToast({
							title: '您拒绝了请求',
							icon: 'error',
							duration: 2000
						});
						return;
					}
				})
			},

			clickBtn() {

				uni.getUserProfile({
					desc: '获取你的昵称、头像、地区及性别',
					success: res => {
						this.infors = res.userInfo;
						this.showPhoneMask = true;
					},
					fail: res => {

						//拒绝授权
						// wx.showToast({
						// 	title: '您拒绝了请求,不能正常使用小程序',
						// 	icon: 'error',
						// 	duration: 2000
						// });
						return;
					}
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.userAuth {
		bottom: 0;
		right: 0;
		position: fixed;
		z-index: 5;
		top: 0px;
		left: 0px;
		background-color: rgba(0, 0, 0, 0);

		.mask {
			bottom: 0;
			right: 0;
			position: fixed;
			z-index: 7;
			top: 0px;
			left: 0px;
			background-color: rgba(0, 0, 0, 0.6);

			.cont {
				position: absolute;
				width: 80%;
				height: 190px;
				border-radius: 5px;
				background: #fff;
				left: 10%;
				top: 50%;
				margin-top: -90px;
				text-align: center;
				padding: 20px;
				font-size: 18px;
				font-weight: bold;

				.content {
					font-weight: normal;
					padding: 20px 0;
					font-size: 14px;
				}

			}
		}

		.btn-auth {
			width: 100%;
			height: 100%;
			// background: orange;
			opacity: 0;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			position: absolute;
			z-index: 6;
		}
	}
</style>
